import React, { useState } from "react";
import { NestFilter, Button } from "@ct0/ui";

const { Reveal } = NestFilter;

export default function NestFilterPanel() {
  const [conds, setConds] = useState([
    // {
    //   joint: "AND",
    //   condition: {
    //     key: "f",
    //     operator: "between",
    //     value: ["some value"],
    //   },
    // },
    // {
    //   joint: "AND",
    //   condition: {
    //     key: "h",
    //     operator: "=",
    //     value: [],
    //   },
    // },
  ]);

  const [disabled, setDisabled] = useState(false);
  const [isFirst, setIsFirst] = useState(false);
  const [showError, setShowError] = useState(false);
  const [wheres, setWheres] = useState(["Yo!"]);
  const [text, setText] = useState("");

  const fields = [
    {
      key: "h",
      label: "Boolean",
      type: "boolean",
      component: "input",
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
      },
    },
    {
      key: "a",
      label: "String",
      // operators: ["=", "!="],
      type: "string",
      component: "input",
      valueLabel: (v) => v,
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
      },
    },
    {
      key: "b",
      label: "String 枚举",
      type: "string",
      // operators: ["="],
      component: "select",
      options: [
        { label: "Alpha", value: "a" },
        { label: "Bravo", value: "b" },
      ],
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
      },
    },
    {
      key: "c",
      label: "String IP",
      type: "string",
      component: "ip",
      options: [
        { label: "Alpha", value: "a" },
        { label: "Bravo", value: "b" },
      ],
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
      },
    },
    {
      key: "string date",
      label: "String 日期",
      type: "string",
      component: "date",
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
      },
    },
    {
      key: "string time",
      label: "String 时间",
      type: "string",
      component: "datetime",
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
      },
    },
    {
      key: "d",
      label: "Number",
      type: "number",
      // operators: ["=", ">", "<", "in"],
      component: "input",
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
      },
    },
    {
      key: "e",
      label: "Number 枚举",
      type: "number",
      // operators: ["="],
      component: "select",
      options: [
        { label: "One", value: 1 },
        { label: "Two", value: 2 },
      ],
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
      },
    },
    {
      key: "f",
      label: "Number 日期",
      type: "number",
      // operators: ["=", "in"],
      component: "date",
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
      },
    },
    {
      key: "g",
      label: "Number 时间",
      type: "number",
      component: "datetime",
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
      },
    },
    {
      key: "i",
      label: "String Array",
      type: "string",
      component: "input_array",
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
        isStringArray: true,
      },
    },
    {
      key: "j",
      label: "Number Array",
      type: "number",
      component: "input_array",
      javascriptType: {
        isDate: false,
        isNumber: false,
        isString: false,
        isNumberArray: true,
      },
    },
  ];

  return (
    <div>
      <NestFilter
        key={isFirst}
        showError={showError}
        disabled={disabled}
        defaultFirstItem={isFirst}
        value={conds}
        fields={fields}
        onChange={(v) => setConds(v)}
      />
      <br />

      <label
        onChange={(e) => {
          setIsFirst(e.target.checked);
        }}
      >
        <input type="checkbox" /> 默认添加一条
      </label>
      <br />
      <br />

      <label
        onChange={(e) => {
          setDisabled(e.target.checked);
        }}
      >
        <input type="checkbox" /> disabled
      </label>
      <br />
      <br />

      <label
        onChange={(e) => {
          setShowError(e.target.checked);
        }}
      >
        <input type="checkbox" /> 显示错误
      </label>
      <br />
      <br />

      <Reveal
        fields={fields}
        conditions={conds}
        texts={wheres}
        onTextsChange={setWheres}
        onConditionsChange={setConds}
        tailSlot={!!conds.length && <Button>简单</Button>}
      />
      <br />
      <div>
        <input value={text} onChange={(e) => setText(e.target.value)} />
        <button onClick={() => setWheres([...wheres, text])}>
          添加一个 text
        </button>
      </div>
      <br />

      <div>{JSON.stringify(conds)}</div>
    </div>
  );
}
